<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .menu {
        list-style: none;
        margin: 0;
        padding: 0;
      }
        .menu>li {
        float: left;
        padding: 5px 20px;
        border: 1px solid #c9b8b8;
        background-color: skyblue;
        color: white;
        user-select: none;
      }
        ul::after {
        content: "";
        display: block;
        height: 0;
        visibility: hidden;
        overflow: hidden;
        clear: both;
      }
        div {
        width: 1000px;
        min-height: 100px;
        background-color: antiquewhite;
      }
    </style>
</head>
<body>

    <ul class="menu">
        <li id="vegetables">蔬菜</li>
        <li id="fruit">瓜果</li>
        <li id="oil">粮油</li>
        <li id="meat">禽肉</li>
    </ul>
    <div id="div1"></div>
    <script>

// --------------------------------------------------------------------
        // history.back();回退历史记录
        // history.forward();向前历史
        // history.go(-1);//回退
        // history.go(1);//前进
        // history.go(0);//刷新页面
        // history.pushState();插入状态
        // history.replaceState() 替换状态




        // document.onclick=function(){
        //     history.pushState({a:1},"a","#a");
        // }

        // window.onpopstate=function(e){
        //     console.log(e.state);
        // }

// 当history中没有#a时，开始状态为空界面,点击后出现历史记录,点返回后返回空页面,再点击前进后,会出现{a:1}
// 当history中有#a时，不会刷新页面，就在一个页面更改数据
// .state 可以看到不同状态时的历史数据

// ------------------------------------------------------------------------


var list = {
        vegetables: [
          "大白菜",
          "娃娃菜",
          "油麦菜",
          "菠菜",
          "莲藕",
          "春笋",
          "韭菜",
          "胡萝卜",
          "大葱",
        ],
        fruit: [
          "苹果",
          "西瓜",
          "柚子",
          "梨",
          "香蕉",
          "樱桃",
          "草莓",
          "榴莲",
          "桃子",
          "杏",
          "橘子",
        ],
        oil: [
          "大米",
          "小米",
          "黄米",
          "黄豆",
          "绿豆",
          "红豆",
          "精面",
          "莜面",
          "花生油",
          "大豆油",
          "橄榄油",
        ],
        meat: [
          "牛肉",
          "羊肉",
          "鸡肉",
          "猪肉",
          "鸭肉",
          "鱼肉",
          "驴肉",
          "鸡蛋",
          "鸭蛋",
        ],
      }; 



    var prev, lis,div1;

    init();
    function init() {
    div1=document.getElementById("div1");
    lis = Array.from(document.getElementsByTagName("li"));
    lis.forEach(function (item) {
        item.onclick = clickhandler;
    });
    
    changeTab(lis[0])
    var data=list[lis[0].id];
    renderDiv(data,lis[0].id);
    history.pushState(data,lis[0].id,"#"+lis[0].id);
    window.onpopstate=popHandler;
    }

    function clickhandler() {
    changeTab(this);
    var data=list[this.id];
    renderDiv(data,this.id);
    history.pushState(data,this.id,"#"+this.id);
    }

    function renderDiv(data,id){
    div1.innerHTML="<ul>"+data.reduce(function(value,item){
        return  value+="<li>"+item+"</li>"
    },"")+"</ul>";
    
    }

    function changeTab(elem) {
    if (prev) {
        prev.style.backgroundColor = "skyblue";
    }
    prev = elem;
    prev.style.backgroundColor = "darkblue";
    }

    function popHandler(e){
        if(!e.state) return;
        renderDiv(e.state,location.hash.slice(1));
        changeTab(document.getElementById(location.hash.slice(1)))
    }

        
        
        
        
    
//   1-  function changeTab(elem)  这段程序是对点击前后颜色改变的，开始时prev未定义，当点击后，由于prev未定义，
//   if条件为假，执行到prev=this时，将点击的引用赋值给prev，然后改变了当前的prev的颜色，就是改变了当前点击的颜色
//   当点击下一个时，prev是上一个被点击的引用地址，所以此时prev存在，进入if条件，上一次点击的颜色变回去，然后把当前的再赋值给prev，改变当前颜色
    
//    2-init()相当于一个入口，当执行init时，这个代码才开始执行 
    
    //    3-渲染不要添加历史记录 
    
    // 4- function renderDiv(data,id) 这段是将对应的li放入ul中
    
    // 5- changeTab(lis[0])  这是对初始界面时，显示效果
    // 6-因为不是超链接，所以需要将列表转换为数组

    
    
    
    
    
    
    
    
    </script>
</body>
</html>